<template>
    <ul class="action-list-wrap">
        <li v-for="(item, index) of menuList.length > max ? menuList.slice(0, max - 1) : menuList" :key="item.value">
            <a-divider type="vertical" v-if="index > 0" />
            <a @click="handleAction(item.value, record)">{{ item.name }}</a>
        </li>
        <li v-if="menuList.length > max">
            <a-divider type="vertical" />
            <a-dropdown>
                <a> 更多<DownOutlined class="margin-l-8" /> </a>
                <template #overlay>
                    <a-menu>
                        <a-menu-item v-for="item of menuList.slice(max - 1)" :key="item.value">
                            <a @click="handleAction(item.value, record)">{{ item.name }}</a>
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </li>
    </ul>
</template>

<script lang="ts">
import { hasPerm } from '@/utils/util';
import { DownOutlined } from '@ant-design/icons-vue';
import { IActionType, IActionMenuItem } from '@/types';
import { defineComponent, unref, computed } from 'vue';
export default defineComponent({
    props: {
        record: {
            type: Object,
            default: () => ({})
        },
        options: {
            type: Object,
            default: () => ({})
        },
        max: {
            type: Number,
            default: 2
        }
    },
    components: {
        DownOutlined
    },
    emits: ['actionEvent'],
    setup(props, { emit }) {
        const showDelete = (record: Recordable) => {
            return record.status === '4' || (record.stage === '1' && record.status === '1');
        };
        const showRequireChange = (record: Recordable) => {
            const { relateRequest, status, stage, isRequireAnalyse, isPlan, isSplit } = record;
            const statusArr = ['4', '5', '6'];
            if (!statusArr.includes(status) && +stage >= 7 && status !== '3') {
                // 1.有子需求的父需求直接不显示 2.没有子需求的需求： a.不走系统分析的显示 b.走系统分析但是不拆分不规划的显示
                if (relateRequest === 0) {
                    return isRequireAnalyse === '否' || (isPlan === '否' && isSplit === '否');
                }
                // 子需求显示
                else {
                    return true;
                }
            } else {
                return false;
            }
        };
        const menuOptions = computed(() => {
            return {
                showDelete: true,
                showDetail: true,
                showRequireChange: true
            };
        });
        const menuList = computed(() => {
            const record: Recordable = props.record;
            const list: IActionMenuItem[] = [];
            // 是否添加详情
            if (unref(menuOptions).showDetail) {
                list.push({ name: '详情', value: 'detail' });
            }
            // 是否添加删除
            if (unref(menuOptions).showDelete && hasPerm('taskRequire.myRequire.delete')) {
                if (showDelete(record)) {
                    list.push({
                        name: '删除',
                        value: 'delete'
                    });
                }
            }
            if (showRequireChange(record) && hasPerm('taskRequire.myRequire.requireChange')) {
                if (record.requireChange === 0) {
                    list.push({
                        name: '查看变更流程',
                        value: 'showChange'
                    });
                } else {
                    list.push({
                        name: '需求变更',
                        value: 'change'
                    });
                }
            }
            return list;
        });
        const handleAction = (type: IActionType, record: Recordable) => {
            emit('actionEvent', {
                type,
                record
            });
        };
        return {
            menuList,
            handleAction
        };
    }
});
</script>
<style scoped lang="less">
.action-list-wrap {
    list-style: none;
    margin: 0 !important;
    padding-left: 0 !important;
    & > li {
        display: inline-block;
        a {
            display: inline-block;
        }
    }
}
</style>